<template>
    <div>
        <!--  1.标题-->
        <h1>欢迎登录</h1>
        <!--  2.表单-->
        <div>
            <van-tabs v-model:active="active" @change="this.logintype=!this.logintype">
                <van-tab title="账号登录"></van-tab>
                <van-tab title="短信登录"></van-tab>
            </van-tabs>
        </div>
        <div>
            <van-form v-if="logintype">
                <van-cell-group inset>
                    <van-field
                        v-model="user.account"
                        label="账号"
                        placeholder="请输入用户名或手机号"
                        :rules="[{ required: true, message: '请填写用户名' }]"
                    />
                </van-cell-group>

                <van-cell-group inset>
                    <van-field
                        v-model="user.password"
                        type="password"
                        name="密码"
                        label="密码"
                        placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                    />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="button" @click="login">
                        登录账号
                    </van-button>
                </div>
            </van-form>
            <van-form v-else>
                <van-cell-group inset>
                    <van-field
                        v-model="user.account"
                        label="手机号"
                        placeholder="请输入手机号"
                        :rules="[{ required: true, message: '请填写手机号' }]"
                    />
                </van-cell-group>
                <van-cell-group inset>
                    <van-field
                        v-model="user.password"
                        center
                        clearable
                        label="验证码"
                        placeholder="请输入短信验证码"
                    >
                        <template #button>
                            <van-button size="small" @click="sendCode" type="primary">发送验证码</van-button>
                        </template>
                    </van-field>
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="button" @click="login">
                        登录
                    </van-button>
                </div>
            </van-form>

        </div>
        <!--  3.左右 跳转-->
        <div>
            <router-link style="float: left" to="/register">注册账号</router-link>
            <router-link style="float:right;" to="/findpass">找回密码</router-link>
        </div>
    </div>
</template>

<script>
import {showToast} from "vant";

export default {
    name: "Login",
    data(){
        return{
            active:0,
            logintype:true,
            user:{}
        }
    },methods:{
        sendCode(){
            //请求接口
            this.axios.get("/api/sms/sendlcode.do?phone="+this.user.account).then(res=>{

                if(res.data.code==0){

                    showToast("亲，短信发送成功！");
                }
            })
        },
        login(){
            //请求接口 实现登录
            var u='api/user/logincode.do'
            if(this.logintype){
                u='api/user/loginaccount.do'
            }
            //请求接口
            this.axios.post(u,this.user).then(res=>{

                if(res.data.code==0){
                    //成功 返回令牌 存储起来
                    this.$store.commit("setToken",res.data.data);
                    showToast("亲，欢迎使用");
                    this.$router.push("/");
                }else {
                    showToast("亲，登录失败！");
                }

            })
        }
    }
}
</script>

<style scoped>

</style>
